<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/contact-us.css">
    <!--高德地图-->
    <style>
        body {
            margin: 0;
            font: 13px/1.5 "Microsoft YaHei", "Helvetica Neue", "Sans-Serif";
            min-height: 960px;
            min-width: 600px;
        }

        .my-map {
            margin: 0 auto;
            width: 500px;
            height: 300px;
        }

        .my-map .icon {
            background: url(http://lbs.amap.com/console/public/show/marker.png) no-repeat;
        }

        .my-map .icon-cir {
            height: 31px;
            width: 28px;
        }

        .my-map .icon-cir-blue {
            background-position: -11px -55px;
        }

        .amap-container {
            height: 100%;
        }
    </style>
    <title>联系我们</title>
</head>

<body>
    <!--导航-->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="row">
                <div class=" col-md-10 col-md-offset-2">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img alt="Brand" class=" img-responsive logo"
                                src="images/contact-us/logo.png"></a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
                            <li><a href="javascript:;">产品与服务</a>
                                <ul class="dropdown-menu">
                                    <li style="text-align: center;"><strong><a
                                                href="product-service.html">上程丨产品</a></strong>
                                    </li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="proudct-one.html">数字城市地名地址服务平台</a></li>
                                    <li><a href="product-two.html">毕业设计全过程综合服务平台</a></li>
                                    <li><a href="product-three.html">环境网格化综合系统</a></li>
                                    <li><a href="product-four.html">B2BB2C多用户大型电商平台</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li style="text-align: center;"><strong><a href="service.html">上程丨服务</a></strong>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="javascript:;">上程教育</a>
                                <ul class="dropdown-menu">
                                    <li><a href="school-enterprise-cooperation.html">校企合作</a></li>
                                    <li><a href="skill-training.html">技能培训</a></li>
                                    <li><a href="service-advantage.html">服务优势</a></li>
                                </ul>
                            </li>
                            <li><a href="news.html">新闻资讯</a>

                            </li>
                            <li><a href="about-us.html">关于我们</a>

                            </li>
                            <li><a href="contact-us.html">联系我们</a></li>

                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><span class="phone"><span class="glyphicon glyphicon-earphone"
                                        aria-hidden="true"></span>&nbsp;028-87850778</span></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </nav>
    <!--版头-->
    <div class=" container-fluid">
        <div class="row">
            <div class=" col-md-12" style="padding: 0;">
                <img src="images/contact-us/header.jpg" class=" img-responsive" alt="">
            </div>
        </div>
    </div>
    <!--路径导航-->
    <div class=" container-fluid">
        <div class=" row">
            <div class=" col-md-10 col-md-offset-2">
                <ol class="breadcrumb path-nav">
                    <li><a href="index.html">首页</a></li>
                    <li class="active">联系我们</li>
                </ol>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class=" container">
        <div class="row content">
            <div class=" col-md-6">
                <!--高德地图-->
                <div class="my-map">
                    <div id="mapContainer1"></div>
                </div>
            </div>
            <div class=" col-md-6 map-describe">
                <h3>第一办公区</h3>
                <p style="margin-top: 40px;">地址：四川省成都市郫都区菁蓉镇静园东路28号国家信息中心大数据创新创业（成都）基地6F</p>
                <p>电话：028-87850778</p>
                <p>Email：support@suncaper.net</p>
            </div>
        </div>
        <div class="row content">
            <div class=" col-md-6">
                <div class="my-map">
                    <div id="mapContainer2"></div>
                </div>
            </div>
            <div class=" col-md-6 map-describe">
                <h3>第二办公区</h3>
                <p style="margin-top: 40px;">地址：四川省成都市郫都区菁蓉镇大禹东路119号3F</p>
                <p>电话：028-87850778</p>
                <p>Email：support@suncaper.net</p>
            </div>
        </div>
    </div>
    <!--底部-->
    <div class=" container-fluid footer">
        <div class="row">
            <div class=" col-md-10 col-md-offset-2">
                <img src="images/contact-us/footerlogo.png" class=" img-responsive" alt="底部logo">
            </div>
        </div>
        <div class="row">
            <div class=" col-md-5 col-md-offset-2">
                <p><strong style="color:white;">专业、开放、诚信、共享,为智慧教育助力,为教者赋能。</strong></p>
            </div>
            <div class=" col-md-5">
                <p style="color: white;"><a href="javascript:;">技能培训 </a>｜ <a href="javascript:;">上程产品</a> ｜<a
                        href="javascript:;"> 新闻资讯</a> ｜<a href="javascript:;"> 关于我们</a></p>
                <div class="col-md-offset-1">
                    <a href="javascript:;"><img src="images/contact-us/qqicon.png" alt=""></a>
                    <a href="javascript:;"><img src="images/contact-us/weixinicon.png" alt=""></a>
                    <a href="javascript:;"><img src="images/contact-us/phoneicon.png" alt=""></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class=" col-md-10 col-md-offset-2">
                <p style="color: white;">Copyright ©2019 成都上程数据有限公司所有 All Rights Reserved 蜀ICP备19012431号-1</p>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="js/contact-us.js"></script>
    <!--高德地图1脚本-->
    <script src="//webapi.amap.com/maps?v=1.3&key=8325164e247e15eea68b59e89200988b"></script>
    <script>
        !function () {
            var infoWindow, map, level = 18,
                center = { lng: 103.855266, lat: 30.779678 },
                features = [{ type: "Marker", name: "第一办公区", desc: "地址：四川省成都市郫都区菁蓉镇静园东路28号国家信息中心大数据创新创业（成都）基地6F", color: "blue", icon: "cir", offset: { x: -9, y: -31 }, lnglat: { lng: 103.855266, lat: 30.779627 } }];

            function loadFeatures() {
                for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
                    data = features[i];
                    switch (data.type) {
                        case "Marker":
                            feature = new AMap.Marker({
                                map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                                zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                                content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
                            });
                            break;
                        case "Polyline":
                            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                            }
                            feature = new AMap.Polyline({
                                map: map, path: path, extData: data, zIndex: 2,
                                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity
                            });
                            break;
                        case "Polygon":
                            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                            }
                            feature = new AMap.Polygon({
                                map: map, path: path, extData: data, zIndex: 1,
                                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                                fillColor: data.fillColor, fillOpacity: data.fillOpacity
                            });
                            break;
                        default: feature = null;
                    }
                    if (feature) { AMap.event.addListener(feature, "click", mapFeatureClick); }
                }
            }

            function mapFeatureClick(e) {
                if (!infoWindow) { infoWindow = new AMap.InfoWindow({ autoMove: true }); }
                var extData = e.target.getExtData();
                infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
                infoWindow.open(map, e.lnglat);
            }

            map = new AMap.Map("mapContainer1", { center: new AMap.LngLat(center.lng, center.lat), level: level });

            loadFeatures();

            map.on('complete', function () {
                map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
                    map.addControl(new AMap.ToolBar);
                    map.addControl(new AMap.OverView({ isOpen: true }));
                    map.addControl(new AMap.Scale);
                });
            })

        }();
    </script>
    <!--高德地图2脚本-->
    <script>
        !function () {
            var infoWindow, map, level = 16,
                center = { lng: 103.86269, lat: 30.781024 },
                features = [{ type: "Marker", name: "第二办公区", desc: "地址：四川省成都市郫都区菁蓉镇大禹东路119号3F", color: "blue", icon: "cir", offset: { x: -9, y: -31 }, lnglat: { lng: 103.86269, lat: 30.780729 } }];

            function loadFeatures() {
                for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
                    data = features[i];
                    switch (data.type) {
                        case "Marker":
                            feature = new AMap.Marker({
                                map: map, position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
                                zIndex: 3, extData: data, offset: new AMap.Pixel(data.offset.x, data.offset.y), title: data.name,
                                content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>'
                            });
                            break;
                        case "Polyline":
                            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                            }
                            feature = new AMap.Polyline({
                                map: map, path: path, extData: data, zIndex: 2,
                                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity
                            });
                            break;
                        case "Polygon":
                            for (j = 0, jl = data.lnglat.length, path = []; j < jl; j++) {
                                path.push(new AMap.LngLat(data.lnglat[j].lng, data.lnglat[j].lat));
                            }
                            feature = new AMap.Polygon({
                                map: map, path: path, extData: data, zIndex: 1,
                                strokeWeight: data.strokeWeight, strokeColor: data.strokeColor, strokeOpacity: data.strokeOpacity,
                                fillColor: data.fillColor, fillOpacity: data.fillOpacity
                            });
                            break;
                        default: feature = null;
                    }
                    if (feature) { AMap.event.addListener(feature, "click", mapFeatureClick); }
                }
            }

            function mapFeatureClick(e) {
                if (!infoWindow) { infoWindow = new AMap.InfoWindow({ autoMove: true }); }
                var extData = e.target.getExtData();
                infoWindow.setContent("<h5>" + extData.name + "</h5><div>" + extData.desc + "</div>");
                infoWindow.open(map, e.lnglat);
            }

            map = new AMap.Map("mapContainer2", { center: new AMap.LngLat(center.lng, center.lat), level: level });

            loadFeatures();

            map.on('complete', function () {
                map.plugin(["AMap.ToolBar", "AMap.OverView", "AMap.Scale"], function () {
                    map.addControl(new AMap.ToolBar);
                    map.addControl(new AMap.OverView({ isOpen: true }));
                    map.addControl(new AMap.Scale);
                });
            })

        }();
    </script>
</body>

</html>